<!--
@description: i18n 国际化演示
-->

<template>
  <div class="middle">
    <div>
      <button @click="handleSetLanguage">切换</button>
    </div>
    <div>
      setup 语法糖写法： {{ t('msg.test') }}
    </div>
    <div>
      template 旧版写： {{ $t('msg.test') }}
    </div>
    <div style="width: 400px;">
      <el-config-provider :locale="elementLocale">
        <el-table mb-1 :data="[]" />
        <el-pagination :total="100" />
      </el-config-provider>
    </div>
  </div>
</template>

<script setup lang='js'>
/* ------------------------ 导入 与 引用 ----------------------------------- */

import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

import zh from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'

/* ------------------------ 变量 与 数据 ----------------------------------- */

const { t, locale } = useI18n()
const elementLocale = computed(() => (locale.value === 'zh' ? zh : en))

/* ------------------------ 函数 与 方法 ----------------------------------- */
// 切换语言的方法
const handleSetLanguage = () => {
  // 切换 i18n 的 locale
  locale.value = locale.value === 'zh' ? 'en' : 'zh'
}

</script>

<style scoped lang="scss">
.middle {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>